<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Switch Demo</title>
    <link rel="stylesheet" href="./styles/hint.min.css">
    <link rel="stylesheet" href="./styles/bootstrap.min.css">
    <link rel="stylesheet" href="./styles/index.css">
</head>

<body>
    
    <!-- HEADER PART -->
    <header>
        <p>TAP配置界面</p>
    </header>

    <!-- MAIN PART -->
    <main>

        <!-- information -->
        <section>
            <div id="operation-information" class="alert alert-success" role="alert">
            </div>
        </section>

        <!-- Switch Section -->
        <section>

            <!-- switch viewport -->
            <div id="topo"></div>

            <!-- operations -->
            <div id="operation" class="btn-group">
                <button type="button"
                        class="btn btn-default dropdown-toggle" 
                        data-toggle="dropdown">操作</button>
                <ul class="dropdown-menu" role="menu">
                    <li><a id="add-flow-entry">添加流表项</a></li>   
                    <li><a id="add-lag-port">添加LAG端口</a></li>
                    <li><a id="add-group-table" style="display:none">添加组表</a></li>
                    <li><a id="add-logic-group">添加逻辑组</a></li>
                    <li><a id="config-controller">配置控制器</a></li>
                </ul>
            </div>

            <!-- changeAlias -->
            <div>
                <form id="changeAlias" class="form-horizontal col-md-offset-4 col-lg-offset-4">
                    <!-- options -->
                    <div class="form-group">
                        <label class="col-md-2 col-lg-2 control-label" for="portname">端口名</label>
                        <div class="col-md-4 col-lg-4">
                            <input class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-md-2 col-lg-2 control-label">TAP</label>
                        <div class="col-md-4 col-lg-4">
                            <div class="switch" data-toggle="on">
                                <!-- generate dynamically -->
                            </div>
                        </div>
                    </div>
                    <!-- confirm and cancel button -->
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-4 col-lg-offset-2 col-lg-4">
                            <button class="confirm btn btn-success">确定</button>
                            <button class="cancel btn btn-success">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </section>

        <!-- Operation Section -->
        <section>
            <!-- add flow entry part -->
            <form id="flow-entry" class="form-horizontal col-md-offset-4 col-lg-offset-4">
                <!-- options -->
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="in-port">入端口</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="in-port" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="priority">优先级</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="priority" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="nw_src">源IP</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="nw_src" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="tp_src">源端口</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="tp_src" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="nw_dst">目的IP</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="nw_dst" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="tp_dst">目的端口</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="tp_dst" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="nw_proto">四层类型</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="nw_proto" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="vlan-id">VLAN</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="dl_vlan" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="out-port">Action</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="actions" class="form-control" type="text" placeholder="多个动作之间以,分隔">
                    </div>
                </div>
                <!-- more option button -->
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-4 col-lg-offset-2 col-lg-4">
                        <button class="more btn btn-default">More...</button>
                    </div>
                </div>
                <!-- more options -->
                <div id="more">
                    <div class="form-group">
                        <label for="" class="col-md-2 col-lg-2 control-label" for="dl_type">三层类型</label>
                        <div class="col-md-4 col-lg-4">
                            <input id="dl_type" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-md-2 col-lg-2 control-label" for="dl_src">源MAC</label>
                        <div class="col-md-4 col-lg-4">
                            <input id="dl_src" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-md-2 col-lg-2 control-label" for="dl_dst">目的MAC</label>
                        <div class="col-md-4 col-lg-4">
                            <input id="dl_dst" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-md-2 col-lg-2 control-label" for="nw_tos">服务类型</label>
                        <div class="col-md-4 col-lg-4">
                            <input id="nw_tos" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <!-- confirm and cancel button -->
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-4 col-lg-offset-2 col-lg-4">
                        <button class="confirm btn btn-success">添加</button>
                        <button class="cancel btn btn-success">取消</button>
                    </div>
                </div>
            </form>

            <!-- add lag port -->
            <form id="lag-port" class="form-horizontal col-md-offset-4 col-lg-offset-4">
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="lag-id">LAG端口ID</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="lag-id" class="form-control" type="text" placeholder="端口范围为[1024, 2047]">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="lag-alias">LAG端口名</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="lag-alias" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="lag-ports">包含物理端口</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="lag-ports" class="form-control" type="text" placeholder="端口ID之间以,分隔,包含的物理端口不能为空"">
                    </div>
                </div>
                <!-- confirm and cancel button -->
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-4 col-lg-offset-2 col-lg-4">
                        <button class="confirm btn btn-success">确认</button>
                        <button class="cancel btn btn-success">取消</button>
                    </div>
                </div>
            </form>

            <!-- add group-table -->
            <form id="group-table" class="form-horizontal col-md-offset-4 col-lg-offset-4">
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="group-id">组表ID</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="group-id" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="group-type">类型</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="group-type" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="group-buckets">Buckets</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="group-buckets" class="form-control" type="text" placeholder="各个Action之间以,分隔">
                    </div>
                </div>
                <!-- confirm and cancel button -->
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-4 col-lg-offset-2 col-lg-4">
                        <button class="confirm btn btn-success">确认</button>
                        <button class="cancel btn btn-success">取消</button>
                    </div>
                </div>
            </form>

            <!-- add logic group -->
            <form id="logic-group" class="form-horizontal col-md-offset-4 col-lg-offset-4">
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="logic-group-id">逻辑组ID</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="logic-group-id" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="logic-group-name">逻辑组名</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="logic-group-name" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="logic-group-ports">包含物理端口</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="logic-group-ports" class="form-control" type="text" placeholder="各个端口之间以,分隔">
                    </div>
                </div>
                <!-- confirm and cancel button -->
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-4 col-lg-offset-2 col-lg-4">
                        <button class="confirm btn btn-success">确认</button>
                        <button class="cancel btn btn-success">取消</button>
                    </div>
                </div>
            </form>

            <!-- config controller -->
            <form id="controller" class="form-horizontal col-md-offset-4 col-lg-offset-4">
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="ctrl-name">控制器名</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="ctrl-name" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="ctrl-ip">IP地址</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="ctrl-ip" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label" for="ctrl-port">端口号</label>
                    <div class="col-md-4 col-lg-4">
                        <input id="ctrl-port" class="form-control" type="text">
                    </div>
                </div>
                <!-- confirm and cancel button -->
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-4 col-lg-offset-2 col-lg-4">
                        <button class="confirm btn btn-success">确认</button>
                        <button class="cancel btn btn-success">取消</button>
                    </div>
                </div>
            </form>

        </section>

        <!-- Port Section -->
        <section>
            <ul class="my-nav-tabs">
                <li class="my-active" data-div="#pie">饼图</li>
                <li data-div="#table">表格</li>
            </ul>
            <div class="my-nav-tabs-div">
                <div id="pie"></div>
                <div id="table" class="my-non-active">
                    <table class="table table-condensed table-striped table-hover">
                        <caption>各出端口流量明细列表</caption>
                        <thead>
                            <tr>
                                <th>出端口</th>
                                <th>流量</th>
                                <th>TAP</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- traffic details will be insert here -->
                        </tbody>
                    </table>
                    <div class="col-md-12 col-lg-12">
                        <button id="changeTap" type="button" class="btn btn-success">提交修改</button>
                    </div>
                </div>
            </div>

        </section>

        <!-- Flow Entries Section -->
        <section id="flow-table">

            <!-- Flow Entries info -->
            <table class="my-table table table-condensed table-striped table-hover">
                <caption>流表项信息</caption>
                <thead>
                    <tr>
                        <th>流表项ID</th>
                        <th>Match Fields</th>
                        <th>Action</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- flow entry details will be insert here -->
                </tbody>
            </table>

            <!-- flow entry info modal -->
            <div class="modal fade" id="FlowEntryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel"></h4>
                        </div>
                        <div class="modal-body" id="line-chart">
                            <form id="flow-entry-details" class="form-horizontal col-md-offset-2 col-lg-offset-2">
                                <div class="form-group">
                                    <label class="col-md-3 col-lg-3 control-label">流表项ID</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="flow-id form-control" type="text">
                                    </div>
                                </div>
                                <!--
                                <div class="form-group">
                                    <label class="col-md-3 col-lg-3 control-label">入端口</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="flow-in-port form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-lg-3 control-label">源MAC</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="flow-dl-src form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-lg-3 control-label">源IP</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="flow-nw-src form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-lg-3 control-label">源端口</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="flow-tp-src form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-lg-3 control-label">目的MAC</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="flow-dl-src form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-lg-3 control-label">目的IP</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="flow-nw-src form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-lg-3 control-label">目的端口</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="flow-tp-src form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-lg-3 control-label">VLAN</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="flow-dl-vlan form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-lg-3 control-label">三层类型</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="flow-dl-proto form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-lg-3 control-label">四层类型</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="flow-nw-proto form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-lg-3 control-label">服务类型</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="flow-nw-tos form-control" type="text">
                                    </div>
                                </div>
                                -->
                                <div class="form-group">
                                    <label class="col-md-3 col-lg-3 control-label">Match Fields</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="flow-match-fields form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-lg-3 control-label">Actions</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="flow-actions form-control" type="text">
                                    </div>
                                </div>
                                <!-- confirm and cancel button -->
                                <div class="form-group">
                                    <div class="col-md-6 col-lg-6 col-md-offset-3 col-lg-offset-3">
                                        <button class="confirm btn btn-success">确认</button>
                                        <button class="cancel btn btn-success">取消</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--
                            <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                        -->
                    </div>
                </div>
            </div>

            <!-- realtime traffic modal -->
            <div class="modal fade" id="RTTModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel"></h4>
                        </div>
                        <div class="modal-body" id="line-chart"></div>
                        <!--
                            <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                        -->
                    </div>
                </div>
            </div>

        </section>

        <!-- LAG Section-->
        <section id="lag-info">
            
            <!-- LAG info --> 
            <table class="my-table table table-condensed table-striped table-hover">
                <caption>LAG端口信息</caption>
                <thead>
                    <tr>
                        <th>端口号</th>
                        <th>端口名</th>
                        <th>此LAG中包含的端口</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- LAG details are here -->
                </tbody>
            </table>

            <!-- LAG info modal -->
            <div class="modal fade" id="LAGModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel"></h4>
                        </div>
                        <div class="modal-body" id="line-chart">
                            <form id="lag-details" class="form-horizontal col-md-offset-3 col-lg-offset-3">
                                <div class="form-group">
                                    <label class="col-md-2 col-lg-2 control-label">端口号</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="lag-port-id form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 col-lg-2 control-label">端口名</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="lag-port-name form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 col-lg-2 control-label">包含的物理端口</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="lag-ports form-control" type="text">
                                    </div>
                                </div>
                                <!-- confirm and cancel button -->
                                <div class="form-group">
                                    <div class="col-md-6 col-lg-6 col-md-offset-2 col-lg-offset-2">
                                        <button class="confirm btn btn-success">确认</button>
                                        <button class="cancel btn btn-success">取消</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--
                            <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                        -->
                    </div>
                </div>
            </div>

        </section>

        <!-- Group Table Section-->
        <section id="group-table-info">
            
            <!-- Group Table info --> 
            <table class="my-table table table-condensed table-striped table-hover">
                <caption>组表信息</caption>
                <thead>
                    <tr>
                        <th>GroupID</th>
                        <th>Type</th>
                        <th>Buckets</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- LAG details are here -->
                </tbody>
            </table>

            <!-- Group Table info modal -->
            <div class="modal fade" id="GroupTableModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel"></h4>
                        </div>
                        <div class="modal-body" id="line-chart">
                            <form id="group-table-details" class="form-horizontal col-md-offset-3 col-lg-offset-3">
                                <div class="form-group">
                                    <label class="col-md-2 col-lg-2 control-label">GroupID</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="group-id form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 col-lg-2 control-label">Type</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="group-type form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 col-lg-2 control-label">Buckets</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="group-buckets form-control" type="text">
                                    </div>
                                </div>
                                <!-- confirm and cancel button -->
                                <div class="form-group">
                                    <div class="col-md-6 col-lg-6 col-md-offset-2 col-lg-offset-2">
                                        <button class="confirm btn btn-success">确认</button>
                                        <button class="cancel btn btn-success">取消</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--
                            <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                        -->
                    </div>
                </div>
            </div>

        </section>

        <!-- Logic Group Section-->
        <section id="logic-group-info">
            
            <!-- Group Table info --> 
            <table class="my-table table table-condensed table-striped table-hover">
                <caption>逻辑组信息</caption>
                <thead>
                    <tr>
                        <th>逻辑组ID</th>
                        <th>逻辑组名</th>
                        <th>包含物理端口</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- logic group ports details are here -->
                </tbody>
            </table>

            <!-- Logic Group info modal -->
            <div class="modal fade" id="LogicGroupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel"></h4>
                        </div>
                        <div class="modal-body" id="line-chart">
                            <form id="logic-group-details" class="form-horizontal col-md-offset-3 col-lg-offset-3">
                                <div class="form-group">
                                    <label class="col-md-2 col-lg-2 control-label">逻辑组ID</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="logic-group-id form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 col-lg-2 control-label">逻辑组名</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="logic-group-name form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 col-lg-2 control-label">包含物理端口</label>
                                    <div class="col-md-6 col-lg-6">
                                        <input class="logic-group-ports form-control" type="text">
                                    </div>
                                </div>
                                <!-- confirm and cancel button -->
                                <div class="form-group">
                                    <div class="col-md-6 col-lg-6 col-md-offset-2 col-lg-offset-2">
                                        <button class="confirm btn btn-success">确认</button>
                                        <button class="cancel btn btn-success">取消</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--
                            <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                        -->
                    </div>
                </div>
            </div>

        </section>

    </main>

    <!-- FOOTER PART -->
    <footer>
        <p>copyright &copy; 上海同悦信息科技有限公司</p>
        <p><a href="http://tooyum.com/wo/wo.html">联系我们</a></p>
    </footer>
    
    <!-- import javascript files -->
    <script src="./scripts/jquery-3.2.1.min.js"></script>
    <script src="./scripts/bootstrap.min.js"></script>
    <script src="./scripts/highcharts.js"></script>
    <script src="./scripts/config.js"></script>
    <script src="./scripts/traffic.js"></script>
    <script src="./scripts/rest.js"></script>
    <script src="./scripts/index.js"></script>

</body>
</html>